<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的购物车</title>
		<link rel="stylesheet" type="text/css" href="css/css.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
	</head>
	<body>
		<div id="contain">
			<div id="banner">
				<div class="banner1">
					<div class="banner2">
						<ul>
							<li><img src="img/小房子_03.png"></li>
							<li><a href="#">京东首页</a></li>
							<li><i class="fa fa-map-marker" aria-hidden="true"></i></li>
							<li>
								<option>广东</option>
							</li>
						</ul>
					</div>
					<div class="banner3">
						<ul>
							<li><a href="#">余生</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
							<li><span>|</span></li>
							<li><a href="#">我的订单</a></li>
							<li><span>|</span></li>
							<li><a href="#">我的京东</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
							<li><span>|</span></li>
							<li><a href="#">京东会员</a></li>
							<li><span>|</span></li>
							<li><a href="#">企业采购</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
							<li><span>|</span>
							<li>
							<li><a href="#">客户服务</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
							<li><span>|</span></li>
							<li><a href="#">网站导航</a></li>
							<li><span>|</span>
							<li>
							<li><a href="#">手机京东</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div id="content">
				<div class="content1">
					<div class="logo"><img src="img/京东购物车项目.png"><a href="#">购物车</a></div>
					<div class="from">
						<input type="text" class="search" value=''>
						<span class='photo' title="未选择取任何文件">
							<img src="camera.png" alt="">
						</span>
						<button class='button'>
							<i>搜索</i>
						</button>
					</div>
				</div>
				<div class="content2">
					<div class="dl">
						<ul>
							<li class="sanjiao"><img src="img/三角警告_07.png"></li>
							<li class="denglu">你还没有登录!请登录后购物车的商品将保存到你的账号中</li>
							<li><button class="dl1"><i>立即登录</i></button></li>
						</ul>
					</div>
				</div>
				<div class="content3" id="jd_cart">
					<div class="jdsp">
						<div class="allshopping">
							<ul>
								<li><em>全部商品</em></li>
								<li>
									<hr class="underscorecharacter" />
								</li>
							</ul>
						</div>
						<div class="region">
							<ul>
								<li>配送至:</li>
								<li>
									<select class="area">
										<option>广东省汕头市龙湖区</option>
									</select>
								</li>
							</ul>
						</div>
					</div>
					<div class="operationbox">
						<div class="allcheck">
							<input type="checkbox" checked id="checkAll" />全选
						</div>
						<div class="shopping">商品</div>
						<div class="nullbox"></div>
						<div class="unitprice">单价</div>
						<div class="amount">数量</div>
						<div class="subtotal">小计</div>
						<div class="system">操作</div>
					</div>
				</div>
				<div id="content5">
					<div class="phonebox1">
						<div class="check"><input type="checkbox" checked id="checkAll" /></div>
						<div class="phonepicture"><img src="img/手机1.png"></div>
						<div class="phoneinformation"><a href="#">小米10 Pro 双模5G手机【下单送豪</br> &ensp; 礼】骁龙865 新品游戏手机小米10pro</a></div>
						<div class="phonechoose" title="珍珠白">珍珠白 8+258GB</br>官方标配</div>
						<div class="price">￥4699.00</div>
						<div class="number">
							<button onclick="calc(this)">-</button>
							<span> 1 </span>
							<button onclick="calc(this)">+</button>
						</div>
						<div class="total">￥4699.00</div>
						<div class="opreate"><a href="#">删除</a></div>
					</div>
					<div class="phonebox1">
						<div class="check"><input type="checkbox" checked id="checkAll" /></div>
						<div class="phonepicture"><img src="img/手机2.png"></div>
						<div class="phoneinformation"><a href="#">小米10 5G游戏手机【至高12期分期0</br>首付】 钛银黑 8G+256G</a></div>
						<div class="phonechoose" title="钛银黑">钛银黑</br>8G+256G</div>
						<div class="price">￥3788.00</div>
						<div class="number">
							<button onclick="calc(this)">-</button>
							<span> 1 </span>
							<button onclick="calc(this)">+</button>
						</div>
						<div class="total">￥3788.00</div>
						<div class="opreate"><a href="#">删除</a></div>
					</div>
					<div class="phonebox1">
						<div class="check"><input type="checkbox" checked id="checkAll" /></div>
						<div class="phonepicture"><img src="img/手机3.png"></div>
						<div class="phoneinformation"><a href="#">Apple 苹果 iphone 11 手机 黄色 全网通 128GB</a></div>
						<div class="phonechoose" title="黄色">黄色</br>全网通 128GB</div>
						<div class="price">￥5489.00</div>
						<div class="number">
							<button onclick="calc(this)">-</button>
							<span> 1 </span>
							<button onclick="calc(this)">+</button>
						</div>
						<div class="total">￥5489.00</div>
						<div class="opreate"><a href="#">删除</a></div>
					</div>
					<div class="phonebox1">
						<div class="check"><input type="checkbox" checked id="checkAll" /></div>
						<div class="phonepicture"><img src="img/手机4.png"></div>
						<div class="phoneinformation"><a href="#">Apple 苹果 iphone 11 手机 绿色 全网通 128GB</a></div>
						<div class="phonechoose" title="绿色">绿色</br>全网通 128GB</div>
						<div class="price">￥5399.00</div>
						<div class="number">
							<button onclick="calc(this)">-</button>
							<span> 1 </span>
							<button onclick="calc(this)">+</button>
						</div>
						<div class="total">￥5399.00</div>
						<div class="opreate"><a href="#">删除</a></div>
					</div>
				</div>
				<div class="Bottombox">
					<div class="bottombox">
						<ul>
							<li><input type="checkbox" checked id="checkAll" />全选</li>
							<li><a href="#">删除选中商品</a></li>
							<li><a href="#">移到关注</a></li>
							<li><a href="#">清理购物车</a></li>
					</div>
					<div class="rightbottombox">
						<div class="select">
							已选择<span>4</span>件商品<i class="fa fa-angle-down" aria-hidden="true"></i>
						</div>
						<div class="bottomprice">
							总价:<span>￥19375.00</span>
						</div>
						<div class="settlement">
							<button>去结算</button>
						</div>
					</div>
				</div>
			</div>
			<div id="guessyoulike">
				<h2 class="guesswhatyoulike">猜你喜欢</h2>
				<hr class="guesswhatyoulike1">

				<div id="goodlistdiv">
					<ul id="goodlist">

					</ul>
					<div class="left">
						<</div> <div class="right">>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			<div class="footer1">
				<div class="fourzt">
					<ul>
						<li><img src="img/多_03.png"></li>
						<li><i class="ttf">品类齐全,轻松购物</i></li>
						<li><img src="img/快_03.png"></li>
						<li><i class="ttf">多仓直发,极速配送</i></li>
						<li><img src="img/好_03.png"></li>
						<li><i class="ttf">正品行货,精致服务</i></li>
						<li><img src="img/ʡ_03.png"></li>
						<li><i class="ttf">天天低价,畅选无忧</i></li>
					</ul>
				</div>
				<hr>
				<div class="btbox">
					<div class="bt1">
						<h2>购物指南</h2>
						<ul>
							<li><a href="#">购物流程</a></li>
							<li><a href="#">会员介绍</a></li>
							<li><a href="#">生活旅行/团购</a></li>
							<li><a href="#">常见问题</a></li>
							<li><a href="#">大家电</a></li>
							<li><a href="#">联系客服</a></li>
						</ul>
					</div>
					<div class="bt2">
						<h2>配送方式</h2>
						<ul>
							<li><a href="#">上门自提</a></li>
							<li><a href="#">211限时达</a></li>
							<li><a href="#">配送服务查询</a></li>
							<li><a href="#">配送费收取标准</a></li>
							<li><a href="#">海外配送</a></li>
						</ul>
					</div>
					<div class="bt3">
						<h2>支付方式</h2>
						<ul>
							<li><a href="#">货到付款</a></li>
							<li><a href="#">在线支付</a></li>
							<li><a href="#">分期付款</a></li>
							<li><a href="#">公司转账</a></li>

						</ul>
					</div>
					<div class="bt4">
						<h2>售后服务</h2>
						<ul>
							<li><a href="#">售后政策</a></li>
							<li><a href="#">价格保护</a></li>
							<li><a href="#">退款说明</a></li>
							<li><a href="#">返修/退换货</a></li>
							<li><a href="#">取消订单</a></li>
						</ul>
					</div>
					<div class="bt5">
						<h2>特色服务</h2>
						<ul>
							<li><a href="#">夺宝岛</a></li>
							<li><a href="#">DIY装机</a></li>
							<li><a href="#">延保服务</a></li>
							<li><a href="#">京东E卡</a></li>
							<li><a href="#">京东通信</a></li>
							<li><a href="#">京东鱼智能</a></li>
						</ul>
					</div>
				</div>
				<hr>
				<div class="dxbox">
					<div class="dbdht">
						<ul>
							<li><a href="#">关于我们</a></li>
							<li><span>|</span></li>
							<li><a href="#">联系我们</a></li>
							<li><span>|</span></li>
							<li><a href="#">联系客服</a></li>
							<li><span>|</span></li>
							<li><a href="#">合作招商</a></li>
							<li><span>|</span></li>
							<li><a href="#">商家帮助</a></li>
							<li><span>|</span></li>
							<li><a href="#">营销中心</a></li>
							<li><span>|</span></li>
							<li><a href="#">手机京东</a></li>
							<li><span>|</span></li>
							<li><a href="#">友情链接</a></li>
							<li><span>|</span></li>
							<li><a href="#">销售联盟</a></li>
							<li><span>|</span></li>
							<li><a href="#">京东社区</a></li>
							<li><span>|</span></li>
							<li><a href="#">风险监测</a></li>
							<li><span>|</span></li>
							<li><a href="#">隐私政策</a></li>
							<li><span>|</span></li>
							<li><a href="#">京东公益</a></li>
							<li><span>|</span></li>
							<li><a href="#">English Site</a></li>
							<li><span>|</span></li>
							<li><a href="#">Media&ensp;&&ensp;IR</a></li>
						</ul>
					</div>
					<div class="dbdht1">
						<ul>
							<li><a href="#">京公网安备&ensp;11000002000088号</a></li>
							<li><span>|</span></li>
							<li>京ICP证070359号</li>
							<li><span>|</span></li>
							<li><a href="#">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a></li>
							<li><span>|</span></li>
							<li>新出发京零 字第大120007号</li>
						</ul>
					</div>
					<div class="dbdht2">
						<ul>
							<li>互联网出版许可证编号新出网证(京)字150号</li>
							<li><span>|</span></li>
							<li><a href="#">出版物经营许可证</a></li>
							<li><span>|</span></li>
							<li><a href="#">网络文化经营许可证京网文[2014]2148-348号</a></li>
							<li><span>|</span></li>
							<li>违法和不良信息举报电话：4006561155</li>
							<li><span>|</span></li>
						</ul>
					</div>
					<div class="dbdht3">
						<ul>
							<li>
								<p>Copyright © 2004-2020京东JD.com版权所有</p>
							</li>
							<li><span>|</span></li>
							<li>消费者维权热线：4006067733 <a href="#">经营证照 </a></li>
							<li><span>|</span></li>
							<li> (京)网械平台备字(2018)第00003号 </li>
							<li><span>|</span></li>
							<li><a href="#"> 营业执照</a></li>

						</ul>
					</div>
					<div class="dbdht4">
						<ul>
							<li><img src="img/国旗_03.png"></li>
						</ul>
					</div>
					<div class="dbdht5">
						<ul>
							<li>京东旗下网站： <a href="#">京东钱包</a>
							<li>
							<li><span>|</span></li>
							<li> <a href="#">京东智联云</a></li>
						</ul>
					</div>
					<div class="dbdht6">
						<ul>
							<ul>
								<li><img src="img/网站_03.png"></li>
								<li class="zt">可信网站</br>信用评价</li>
								<li><img src="img/网警_03.png"></li>
								<li class="zt">网络警察</br>提醒你</li>
								<li><img src="img/诚信_03.png"></li>
								<li class="zt1">诚信网站</li>
								<li><img src="img/互联_03.png"></li>
								<li class="zt">网上有害信</br>息举报专区</li>
								<li><img src="img/下载_03.png"></li>
								<li class="zt">网络举报</br>APP下载</li>

							</ul>
					</div>
				</div>
			</div>

		</div>
		</div>
	</body>
	<script type="text/javascript">
		//手动轮播
		//获取左右按钮，加单击事件
		var guessyoulike = document.getElementById("guessyoulike");
		var leftDiv = guessyoulike.getElementsByClassName("left")[0];
		var rightDiv = guessyoulike.getElementsByClassName("right")[0];
		var ul = document.getElementById("goodlist");

		//向左移动
		var timer = null;
		leftDiv.onclick = leftMove;

		function leftMove() {
			//获取ul当前的left值
			var left = Math.ceil(ul.offsetLeft / 280) * 280; //重新计算left值是280的倍数
			left -= 280;
			if (left < -1120) {
				left = 0;
			}
			//运动效果
			//ul.style.left=left+"px";
			clearInterval(timer); //停止上次定时器
			timer = setInterval(function() { //开启定时器两个参数
				leftDiv.onclick = null; //一次运动没有完成时不能再次点击
				if (ul.offsetLeft > left) { //还没到目标位置
					var newLeft = ul.offsetLeft - 5; //计算一小步
					ul.style.left = newLeft + "px"; //运动一小步
				} else {
					clearInterval(timer); //停止定时器
					ul.style.left = left + "px"; //修正最终位置
					leftDiv.onclick = leftMove; //本次定时器结束单击事件再次有效
				}

			}, 20); //每隔20秒调用一次函数
		}
		//向右移动
		rightDiv.onclick = rightMove;

		function rightMove() {
			//获取ul当前的left值
			var left = Math.ceil(ul.offsetLeft / 280) * 280;
			left += 280;
			if (left > 150) {
				left = -1120;
			}
			//ul.style.left=left+"px";
			clearInterval(timer);
			timer = setInterval(function() {
				rightDiv.onclick = null;
				if (ul.offsetLeft < left) { //还没到目标位置
					var newLeft = ul.offsetLeft + 5;
					ul.style.left = newLeft + "px";
				} else {
					clearInterval(timer);
					ul.style.left = left + "px";
					rightDiv.onclick = rightMove;
				}
			}, 20)
		}
		//鼠标滑入和滑出时左右箭头现实
		var autoMoveTimer = null;
		guessyoulike.onmouseover = function() { //显示
			leftDiv.style.display = "block";
			rightDiv.style.display = "block";
			clearInterval(autoMoveTimer);
		}
		guessyoulike.onmouseout = function() { //隐藏
			leftDiv.style.display = "none";
			rightDiv.style.display = "none";
			autoMove();
		}
		//自动轮播
		function autoMove() {
			var left = -1120;
			autoMoveTimer = setInterval(function() {
				if (ul.offsetLeft > left) {
					var newLeft = ul.offsetLeft - 1;
					ul.style.left = newLeft + "px";
				} else {
					ul.style.left = 0;
				}
			}, 20)
		}
		autoMove();


		//添加商品到购物车
		//1.自动生成商品列表
		//商品数据
		var goodsArr = [{
				imgUrl: "img/phone.jpg",
				name: "华为(HUAWEI)荣耀9Play3",
				price: "868"
			},
			{
				imgUrl: "img/phone2.jpg",
				name: "天语H5全面屏",
				price: "668"
			},
			{
				imgUrl: "img/phone3.jpg",
				name: "OPPO Find X2手机",
				price: "4999"
			},
			{
				imgUrl: "img/phone4.jpg",
				name: "vivo X50 5G手机",
				price: "3498"
			},
			{
				imgUrl: "img/phone5.jpg",
				name: "三星 Galaxy A90",
				price: "2699"
			},
			{
				imgUrl: "img/phone6.jpg",
				name: "Redmi 10X天玑820",
				price: "1799"
			},
			{
				imgUrl: "img/phone7.jpg",
				name: "vivo S5 8GB+128GB",
				price: "1998"
			},
			{
				imgUrl: "img/phone8.jpg",
				name: "vivo X30 双模5G",
				price: "2998"
			},
		];
		//把以上商品放入ul列表
		//获取存放的商品ul
		var goodlist = document.getElementById("goodlist");
		//遍历数组通过函数来进行处理
		//创建li
		goodsArr.forEach(function(el, idx) {
			var li = document.createElement("li");
			goodlist.appendChild(li);
			//创建li中的内容
			var htmlStr = "<div><img src='" + el.imgUrl + "'></div>"
			htmlStr += "<div>" + el.name + "</div>";
			htmlStr += "<div>&yen;" + el.price + "</div>";
			htmlStr += "<div onclick='addCart(" + idx + ")'><a href='#'>添加到购物车</a></div>";
			li.innerHTML = htmlStr;
		})

		//实现商品到购物车
		function addCart(i) {
			//一.如果添加的商品已经在购物车存在，则在数量上增加即可
			//通过要添加的商品名称与购物车商品名称对比
			//如果有相同的名称，则表示此商品已经添加过
			//(1)获取购物车中所有的商品名称
			//(a)获取content5所有行
			var content5 = document.getElementById("content5");
			var alldiv = content5.children;
			//console.log(alldiv);
			//(b)获取所有商品名称
			var allGoodsNameArr = [];
			for (var k = 0; k < alldiv.length; k++) {
				//console.log(k);
				//console.log(alldiv[k]);
				allGoodsNameArr.push(alldiv[k].children[2].innerText);
				//console.log(alldiv[k].children.length);
			}
			//(2)查找要添加的商品名称是否存在于购物车
			var index = allGoodsNameArr.findIndex(function(v) {
				return v == goodsArr[i].name;
			}); //返回-1,表示在数组中不存在要比较的对象
			if (index != -1) { //如果添加的商品已经存在于购物车中
				//获取已添加商品中所在盒子中的数量加1
				var n = alldiv[index].getElementsByTagName("span")[0].innerText;
				n++;
				alldiv[index].getElementsByTagName("span")[0].innerText = n;
				//更新小计 单价*数量
				var price = alldiv[index].getElementsByClassName('price')[0].innerText.substr(1);
				console.log(price);
				alldiv[index].getElementsByClassName('total')[0].innerHTML = "&yen;" + n * price;

				//更新总计
				total();
				return; //不再执行下面的代码，即购物车中不再添加新行	 
			}
			var content5 = document.getElementById("content5");
			var newDiv = document.createElement("div");
			var phonebox1 = newDiv.classList.add("phonebox1");
			content5.appendChild(newDiv);
			//二.如果购物车没有此商品，则商品添加此商品到购物车中

			var newDiv1 = document.createElement("div");
			newDiv.appendChild(newDiv1);
			var check = newDiv1.classList.add("check");
			var newCheckbox = document.createElement("input");
			newCheckbox.setAttribute("type", "checkbox");
			newCheckbox.setAttribute("checked", true);
			newDiv1.appendChild(newCheckbox);
			
			console.log(allCheckbox.length);
			var arr = Array.from(allCheckbox);
			checkAll.checked = arr.every(function(v) {
				return v.checked;
			});
			//实现复选功能
			newCheckbox.onchange = function() {
				// var arr = Array.from(allCheckbox);
				//只要数组中元素的checked值有一个为假，every函数的返回值为假
				checkAll.checked = arr.every(function(v) {
					return v.checked;
				});
				total();
			}
			//放入图片
			var newDiv2 = document.createElement("div");
			newDiv.appendChild(newDiv2);
			var phonepicture = document.createElement("img");
			newDiv2.appendChild(phonepicture);
			phonepicture.src = goodsArr[i].imgUrl;
			phonepicture.width = 104;
			phonepicture.height = 104;
			newDiv2.className = 'phonepicture1';
			//放入商品名称
			var newDiv3 = document.createElement("div");
			newDiv.appendChild(newDiv3);
			var phoneinformation = document.createElement("a");
			phoneinformation.setAttribute("href", "#");
			newDiv3.appendChild(phoneinformation);
			phoneinformation.innerText = goodsArr[i].name;
			phoneinformation.width = 300;
			phoneinformation.height = 100;
			newDiv3.className = 'phoneinformation';
			//放入一个空盒子
			var newDiv4 = document.createElement("div");
			newDiv4.className = 'phonechoose1';
			newDiv.appendChild(newDiv4);
			//放入单价
			var newDiv5 = document.createElement("div");
			newDiv5.className = 'price';
			newDiv.appendChild(newDiv5);
			newDiv5.innerHTML = "&yen;" + goodsArr[i].price;
			//放入数量
			var newDiv6 = document.createElement("div");
			newDiv6.className = 'number';
			newDiv.appendChild(newDiv6);
			newDiv6.innerHTML = '<button onclick="calc(this)">-</button><span> 1 </span><button onclick="calc(this)">+</button>';
			//放入小计
			var newDiv7 = document.createElement("div");
			newDiv7.className = 'total';
			newDiv.appendChild(newDiv7);
			newDiv7.innerHTML = "&yen;" + goodsArr[i].price;
			total();
			//删除操作
			var newDiv8 = document.createElement("div");
			newDiv8.className = 'opreate';
			newDiv.appendChild(newDiv8);
			newDiv8.innerHTML = "<a href='#'>删除</a>";
			newDiv8.getElementsByTagName('a')[0].onclick = function() {
				this.parentNode.parentNode.remove(); //删除行
				total();
				
				var arr = Array.from(allCheckbox);
				//只要数组中元素的checked值有一个为假，every函数的返回值为假
				checkAll.checked = arr.every(function(v) {
					return v.checked;
				});
				//删除全部商品后全选按钮不再被选中
				if (allCheckbox.length === 0) {
					checkAll.checked = false;
				}
			};


		}



		//删除
		var content5 = document.getElementById("content5");
		var allA = content5.getElementsByTagName("a"); //拿到所有a
		//console.log(allA);
		for (var i = 1; i < allA.length; i += 2) { //遍历奇数a
			allA[i].onclick = function() {
				this.parentNode.parentNode.remove(); //删除整个盒子
				total(); //重新总计
				//由每一个盒子复选框状态决定全选按钮状态
				//把复选框集合转成数组
				var arr = Array.from(allCheckbox);
				//只要数组中元素的checked值有一个为假，every函数的返回值为假
				checkAll.checked = arr.every(function(v) {
					return v.checked;
				});
				//删除全部商品后全选按钮不再被选中
				if (allCheckbox.length === 0) {
					checkAll.checked = false;
				}
			}
		}
		//获取全选按钮复选框
		var checkAll = document.getElementById("checkAll");

		var content5 = document.getElementById("content5");
		var allCheckbox = content5.getElementsByTagName("input"); //获取盒子中所有的复选框
		console.log(allCheckbox.length);
		for (var i = 0; i < allCheckbox.length; i++) {
			allCheckbox[i].onchange = function() {
				total();
				//由每一个盒子复选框状态决定全选按钮状态
				//把复选框集合转成数组
				var arr = Array.from(allCheckbox);
				//只要数组中元素的checked值有一个为假，every函数的返回值为假
				checkAll.checked = arr.every(function(v) {
					return v.checked;
				}); //对数组里每个元素进行遍历
			}
		}

		//全选和全不选功能实现
		checkAll.onchange = function() {
			for (var i = 0; i < allCheckbox.length; i++) {
				allCheckbox[i].checked = checkAll.checked;
			}
			total();
		}


		//*****************01
		function total() {

			//三.总计
			var content5 = document.getElementById("content5");
			var alldiv = content5.children;
			var allCheckbox = content5.getElementsByTagName("input"); //获取盒子中所有的复选框
			//console.log(allCheckbox);
			var total = 0;
			for (var i = 0; i < alldiv.length; i++) {
				//累加复选框选中的盒子进行小计
				if (allCheckbox[i].checked) { //复选框选中状态
					total += parseFloat(alldiv[i].children[6].innerText.substr(1));
				}
			}
			//console.log(total);
			//找到最后一个总计
			var content = document.getElementById("content");
			var Bottombox = content.getElementsByClassName("Bottombox")[0];
			var rightbottombox = Bottombox.getElementsByClassName("rightbottombox")[0];
			var bottomprice = rightbottombox.getElementsByClassName("bottomprice")[0];
			//console.log(bottomprice);
			bottomprice.innerHTML = "总价" + "&yen;" + total.toFixed(2);
		}

		function calc(btn) {
			//一.数量增减
			var div = btn.parentNode;
			var spanArr = div.getElementsByTagName("span");
			var span = spanArr[0];
			var n = parseInt(span.innerText);
			if (btn.innerText == '-') {
				n--;
				if (n < 1) {
					n = 1;
				}
			} else {
				n++;
			}
			span.innerText = n;
			//二.小计
			var pricediv = div.previousElementSibling;
			var price = pricediv.innerText.substr(1);
			var sumdiv = div.nextElementSibling;
			sumdiv.innerHTML = "&yen;" + price * n;
			total();
		}
	</script>
</html>
